<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- import CSS -->
    <link href="./css/hp.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        
        <div style="width: 100%;">
            <table >
                <tr>
                    <td>Id</td>
                    <td>team</td>
                   <td style="width: 90px;">alive</td>
                    <td style="width: 90px;">kills</td>
                    <td style="width: 90px;">score</td>
                </tr>
                <tr v-for="item in tableData" >
                    <td style=" width: 20px;">{{item.id}}</td>
                    <td style=" width: 60px;">{{item.team}}</td>
                    <td style=" width: 90px;">
                        <input v-model="item.alive" style="width: 90px; height: auto;"></input>
                    </td>
                    <td style=" width: 90px;">
                        <input v-model="item.kills" style="width: 90px;"></input>
                    </td>
                    <td style="padding: 0px; width: 90px;">
                        <input v-model="item.score" style="width: 90px;"></input>
                    </td>
                </tr>
           
            </table>    
             <button @click="subs" >上传<i class="el-icon-upload el-icon--right" ></i></button>
             <button @click="loaddata" ><i class="" >reload</i></button>
        </div>
      
         
     
    </div>
<script>
      var App = new Vue({
        el:'#app',
        data() {
            
          return {
            tableData:[], 
            leftdata:'',
            rightdata:'',
          }
        },

      
        methods:{
            sub:function(val){
            var line=val
            postdata="matchid="+tableData.matchid;
            axios.post('http://10.0.4.6:800/api/pubgkey.php?put',postdata).then(
              res=>{
                
              })
            }
        },
        mounted(){
     
             this.loaddata();
                
                
        },
        
      methods:{
          loaddata:function(){
            axios.get('http://10.0.4.6:800/api/pubg.php?get').then(
                         res=>{
                               this.leftdata=res.data.data
                               axios.get('http://10.0.4.6:800/api/pubgkey.php?get').then(
                         res=>{
                               console.log(res.data)
                            
                            this.rightdata=res.data.data
                            for(item in this.leftdata){
                                for(items in this.rightdata){
                                    if(this.leftdata[item]['id']==this.rightdata[items]['id']){
                                        this.leftdata[item]['score']=this.rightdata[items]['score']
                                        this.leftdata[item]['kills']=this.rightdata[items]['kills']
                                        // this.leftdata[item]['alive']=this.rightdata[items]['alive']
                                }
                             }
                        }
                        this.tableData=this.leftdata
                       
                    });
                        }); 
                    
          },
          sub:function(val){
            var line=val
            postdata="id="+line.id+"&team="+line.team+"&alive="+line.alive+"&kills="+line.kills+"&score="+line.score;
            axios.post('http://10.0.4.6:800/api/pubgkey.php?put',postdata).then(
              res=>{
                console.log(res.data)
              })
            
            
      },
        subs:function(val){
          for(item in this.tableData){
              console.log(this.tableData[item])
              this.sub(
                  this.tableData[
                      item
                  ]
              )
          } 
      },
   
    },
    

});



  </script>
  
    
</body>
<style>
  body{
    margin: 0px;
    padding: 0px;
  
}
body {
    font-family: Helvetica Neue, Arial, sans-serif;
    font-size: 14px;
    color: #444;
  }
  
  table {
    border: 1px solid #9cebc7;
    border-radius: 3px;
    background-color: #fff;

  } 
  
  th {
    background-color: #42b983;
    color: rgba(255,255,255,0.66);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  td {
    background-color: #f9f9f9;
  }
 
  tr{
    width: 500px;
    /* height: 20px; */
    margin-top: 10px;
  }
  th.active {
    color: #fff;
  }
  
  

</style>
</html>